<template>
	<el-row :class="{ main:main}">
		<el-col class="login-container" :span="24" :lg="12">
			<el-form class="card-box login-form" :model="loginForm" :rules="loginRules" ref="loginForm">
				<h3 class="title">系统登录</h3>
				<el-form-item prop="loginName">
					<md-input class="md-input" type="text" icon="search" name="loginName"
							  @keyup.enter.native="handleLogin" v-model="loginForm.loginName">
						用户名
					</md-input>
				</el-form-item>

				<el-form-item prop="password">
					<md-input class="md-input" type="password" icon="search" name="password"
							  @keyup.enter.native="handleLogin" v-model="loginForm.password">
						密码
					</md-input>
				</el-form-item>

				<el-button type="primary" style="width:100%;margin-bottom:30px;" :loading="loading"
						   @click.native.prevent="handleLogin">登录
				</el-button>
			</el-form>
		</el-col>

		<el-col class="auth-wallpaper" :span="24" :lg="12">
			<div class="oblique"></div>
			<p class="name">管控平台</p>
		</el-col>
	</el-row>
</template>

<script>
	import MdInput from '../../components/MdComponents/MdInput.vue'

	export default {
		name: 'login',
		components: {
			MdInput
		},
		data() {
			const validatePassword = (rule, value, callback) => {
				if (value.length < 6) {
					callback(new Error('密码不能少于6位'))
				} else {
					callback()
				}
			}
			return {
				isMale: true,
				main: false,
				pwdType: 'password',
				loading: false,
				loginForm: {
					loginName: 'admin',
					password: 'admin'
				},
				loginRules: {
					loginName: [{
						required: true, trigger: 'blur'
					}],
					password: [{
						required: true, trigger: 'blur', validator: validatePassword
					}]
				}
			}
		},
		methods: {
			handleLogin() {
				this.$refs.loginForm.validate(valid => {
					if (valid) {
						this.main = true
						this.$store.dispatch('userLogin', this.loginForm).then(() => {
							setTimeout(() => this.$router.push({
								path: '/'
							}), 500)
						}).catch(() => {
							setTimeout(() => { this.main = false }, 500)
						})
					} else {
						return false
					}
				})
			}
		}
	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	@import "src/styles/mixin.scss";

	$bg: #fff;
	$dark_black: #282828;
	$light_black: #333;
	@keyframes enter {
		from {
			top: 30%;
			opacity: 0;
		}
		to {
			top: 25%;
			opacity: 1;
		}
	}

	.login-container {
		background-color: $bg;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow-y: scroll;
		&::-webkit-scrollbar {
			display: none
		}
		.card-box {
			animation: enter 1.5s;
			animation-timing-function: ease-out;
			-moz-animation: enter 1.5s;
			-moz-animation-timing-function: ease-out;
			-webkit-animation: enter 1.5s;
			-webkit-animation-timing-function: ease-out;
		}
		.title {
			font-size: 26px;
			margin: 0 auto 40px auto;
			text-align: center;
			font-weight: bold;
		}
		.login-form {
			width: 40%;
			padding: 35px 35px 15px 35px;
			.el-form-item {
				border-radius: 5px;
				color: #454545;
				margin-bottom: 40px;
				.md-input {
					background-color: $bg;
				}
			}
		}
	}

	.auth-wallpaper {
		background-color: $light_black;
		overflow: hidden;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		.oblique {
			position: absolute;
			background-color: $dark_black;
			left: calc(50% - 27% / 2);
			transform: rotate(15deg);
			top: -7%;
			width: 27%;
			height: 115%;
		}
		.name {
			display: inline-block;
			z-index: 2;
			height: 50px;
			letter-spacing: 70px;
			font-weight: 600;
			color: #20a0ff;
		}
	}

	@media (min-width: 1200px) {
		.login-container {
			@include relative;
			transition: width 0.5s ease-out;
		}
		.auth-wallpaper {
			position: absolute;
			left: 50%;
			transition: width 0.5s ease-out, left 0.5s ease-out;
			.name {
				top: 50%;
				font-size: 4rem;
			}
		}
		.main {
			.auth-wallpaper {
				left: 0;
				width: 100%;
			}
			.login-container {
				width: 0;
			}
		}
	}

	@media (max-width: 1199px) {
		.el-row {
			overflow: hidden;
			.login-container {
				@include relative;
				top: 5.5rem;
				transition: height 0.5s ease-out;
			}
			.auth-wallpaper {
				position: absolute;
				left: 0;
				top: 0;
				height: 5.5rem;
				transition: height 0.5s ease-out;
				.oblique {
					display: none;
				}
				.name {
					margin: 0;
					font-size: 2rem;
				}
			}
		}
	}

</style>
